<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>滚动视差</title>
    <link rel="icon" type="image/x-icon" href="../favicon.ico" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Long+Cang&display=swap"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .image_1 {
        background-image: url(./images/1.jpg);
        background-position: 0 0;
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
      }
      .image_2 {
        background-image: url(./images/2.jpg);
        background-position: 0 0;
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
      }
      .image_3 {
        background-image: url(./images/3.jpg);
        background-position: 0 0;
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
      }
      .image_4 {
        background-image: url(./images/4.jpg);
        background-position: 0 0;
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
      }
      .image_5 {
        background-image: url(./images/5.jpg);
        background-position: 0 0;
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
      }
      .image_6 {
        background-image: url(./images/6.jpg);
        background-position: 0 0;
        background-attachment: fixed;
        background-size: cover;
        width: 100%;
      }
      .word {
        position: relative;
        height: 80vh;
        line-height: 80vh;
        font-size: 55px;
        color: white;
        text-align: center;
        font-weight: bolder;
        font-family: 'Long Cang', cursive;
      }
      .bg {
        text-align: center;
        font-size: 40px;
        font-weight: bolder;
        height: 20vh;
        line-height: 20vh;
        font-family: 'Long Cang', cursive;
        color: white;
        background: rgba(30, 41, 59, 0.28);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
    </style>
  </head>
  <body>
    <div class="image_1">
      <div class="word">「四月是你的谎言」</div>
      <div class="bg">我在盛开的樱花下遇见你，从此命运不再属于自己。</div>
    </div>

    <div class="image_2">
      <div class="word">「言叶之庭」</div>
      <div class="bg">
        每晚临睡前 每天睁开眼的瞬间 不知不觉 我都在祈盼雨天 祈盼雨天
        祈盼和那个人 再次相会
      </div>
    </div>

    <div class="image_3">
      <div class="word">「你的名字」</div>
      <div class="bg">黄昏，不是白昼亦不是夜晚，是我努力却看不清你的脸。</div>
    </div>

    <div class="image_4">
      <div class="word">「天气之子」</div>
      <div class="bg">
        天气真的是很不可思议，光只是天空的模样就让人感动不已。
      </div>
    </div>

    <div class="image_5">
      <div class="word">「K-ON！」</div>
      <div class="bg">
        重要的，珍惜的，一直在身边，一旦成为理所当然，就难以发现
      </div>
    </div>

    <div class="image_6">
      <div class="word">「CLANNAD」</div>
      <div class="bg">我也很没用，但是两个人一起的话，就会变得很坚强。</div>
    </div>
  </body>
</html>
